<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>关联角色</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">
    <style type="text/css">
        .layui-container {
            width: 100%;
        }
        .layui-table-cell .layui-form-checkbox[lay-skin=primary] {
            top: 6px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div style="padding-left: 10px;padding-right: 10px;">
    <table id="rolelist" lay-filter=="rolelist"></table>
    <div class="layui-input-block" style="padding-top: 10px">
        <button class="layui-btn" id="submit_btn">提 交</button>
        <button type="reset" class="layui-btn layui-btn-primary" id="reset_btn">重 置</button>
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
<script type="text/javascript">
    var userid = '${userId}',querData=[];
    layui.use(['table','layer'],function(){
        var $ = layui.jquery, table = layui.table,layer = layui.layer;

        /**
         * 角色列表初始化
         */
        table.render({
            id: 'rolelist'
            , elem: '#rolelist'
            , height: 282
            , url:'${pageContext.request.contextPath}/sys/user/rolelistbyuser?userid='+userid
            , cols: [[
                {checkbox: true,LAY_CHECKED:false} //默认全选
                , {field: 'roleName', title: '角色名称', align:'center'}
            ]]
            , page: true //是否显示分页
            , limits: [5, 10, 15]
            , limit: 5 //每页默认显示的数量
            ,done: function(res, curr, count){
                if(res['data'] != null && res['data'].length > 0){
                    for(var i = 0,len = res['data'].length;i < len;i++){
                        if(res['data'][i]['LAY_CHECKED'] == true){
                            querData.push(res['data'][i]['roleId']);
                        }
                    }
                }
            }
        });

        $("#submit_btn").click(function () {
            var checkStatus = table.checkStatus('rolelist'),
                selectData = checkStatus.data,
                selectIds=[],
                correlatedData = {'userId':userid, 'addIds':[],'deleteIds':[]};

            if(selectData.length > 0){
                for(var j = 0,jlen = selectData.length;j < jlen;j++){
                    selectIds.push(selectData[j]['roleId']);
                    if($.inArray(selectData[j]['roleId'],querData) < 0){
                        correlatedData['addIds'].push(selectData[j]['roleId']);
                    }
                }
                for(var i = 0,ilen=querData.length;i < ilen;i++){
                    if($.inArray(querData[i],selectIds) < 0){
                        correlatedData['deleteIds'].push(querData[i]);
                    }
                }
            }else{
                correlatedData['deleteIds'] = querData;
            }

            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/user/correlaterole',
                contentType : "application/json;charset=UTF-8",
                data:JSON.stringify(correlatedData),
                success:function (data) {
                    layer.msg(data.status);
                    window.parent.layIndex = null;
                    window.parent.layer.closeAll();
                },
                error:function (error) {
                    console.log(error);
                }
            });
        });
    });
</script>
</body>
</html>
